<template>
    <div>
        <div class="rmsp">
            <p class="top">
                <img src="../assets/wqc6.jpg" alt="">
                <span>热卖商品</span>
                <a href="">更多 &gt;</a>
            </p>

            <div class="bottom">
                <dl>
                    <dt>
                        <img src="../assets/wqc7.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <img src="../assets/wqc8.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <img src="../assets/wqc9.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="xpsh">
            <p class="top">
                <img src="../assets/wqc11.jpg" alt="">
                <span>新品上市</span>
                <a href="">更多 &gt;</a>
            </p>

            <div class="bottom">
                <dl>
                    <dt>
                        <img src="../assets/wqc7.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <img src="../assets/wqc8.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>

                <dl>
                    <dt>
                        <img src="../assets/wqc9.jpg" alt="">
                    </dt>
                    <dd>
                        <h3>花名册 2016春装新款 文艺棉质</h3>
                        <mark>￥69元</mark>
                        <p>
                            <span>￥118元</span>
                            <img src="../assets/wqc10.jpg" alt="">
                        </p>
                    </dd>
                </dl>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  name: "sysp"
};
</script>

<style scoped lang="scss">
.rmsp {
  margin-top: 0.2rem;
  padding: 0 2%;
  background-color: white;
  .top {
    height: 0.7rem;
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 6%;
    }
    span {
      display: block;
      width: 78%;
      font-size: 0.3rem;
      margin-left: 2%;
    }
    a {
      color: darkgray;
    }
  }
  .bottom {
    display: flex;
    padding-bottom: 0.4rem;
    dl:nth-child(2) {
      margin: 0 2.5%;
    }
    dl {
      flex: 1;
      dt {
        padding-bottom: 0.2rem;
        img {
          display: block;
          width: 100%;
        }
      }
      dd {
        h3 {
          font-size: 0.3rem;
          line-height: 0.4rem;
        }
        mark {
          font-size: 0.35rem;
          line-height: 0.5rem;
          color: red;
        }
        p {
          height: 0.5rem;
          line-height: 0.5rem;
          display: flex;
          justify-content: space-between;
          span {
            color: #ccc;
            text-decoration: line-through;
          }
          img {
            width: 0.5rem;
          }
        }
      }
    }
  }
}
.xpsh{
    @extend .rmsp
}
</style>
